<script setup>
import { Head, Link, router, useForm } from '@inertiajs/vue3'
import { ref, reactive, watch } from 'vue'
import Icon from '@/Components/Icon.vue'
import Layout from '@/Layouts/Layout.vue'
import Pagination from '@/Components/Pagination.vue'
import SearchFilter from '@/Components/SearchFilter.vue'

const props = defineProps({
    filters: {
        type: Object,
    },
    contacts: {
        type: Array,
    },
})
const form = useForm({
    search: props.filters.search,
    trashed: props.filters.trashed,
})
const autoClose = ref(false)
function change() {
    autoClose.value = true
    form.get('/contacts')
    autoClose.value = false
}

function reset () {
    form.search=null
    form.trashed=null
    change()
}
</script>

<template>
    <Layout>
        <div>
            <Head title="Contacts" />
            <h1 class="mb-8 text-3xl font-bold">Contacts</h1>
            <div class="flex items-center justify-between mb-6">
                <SearchFilter v-model:search="form.search" :auto-close="autoClose" class="mr-4 w-full max-w-md" @reset="reset" @change="change">
                    <label class="block mt-4 text-gray-700">Trashed:</label>
                    <select v-model="form.trashed"  @change="change" class="form-select mt-1 w-full">
                        <option :value="null" />
                        <option value="with">With Trashed</option>
                        <option value="only">Only Trashed</option>
                    </select>
                </SearchFilter>
                <Link class="btn-indigo" :href="route('contacts.create')">
                    <span>Create</span>
                    <span class="hidden md:inline"> Contact</span>
                </Link>
            </div>
            <div class="bt-white rounded-md shadow overflow-x-auto">
                <table class="w-full wihtespace-nowrap">
                    <tr class="text-left font-bold">
                        <th class="pd-4 pt-6 px-6">Name</th>
                        <th class="pd-4 pt-6 px-6">Organization</th>
                        <th class="pd-4 pt-6 px-6">City</th>
                        <th class="pd-4 pt-6 px-6">Phone</th>
                    </tr>
                    <tr v-for="contact in contacts.data" :key="contact.id" class="hover:bg-gray-100 focus-within:bg-gray-100">
                        <td class="border-t">
                            <Link class="flex items-center px-6 py-4 focus:text-indigo-500" :href="route('contacts.edit', contact.id)">
                                {{ contact.name }}
                                <Icon v-if="contact.deleted_at" name="trash" class="flex-shrink-0 ml-2 w-3 h-3 fill-gray-400" />

                            </Link>
                        </td>
                        <td class="border-t">
                            <Link class="flex items-center px-6 py-4" :href="route('contacts.edit', contact.id)" tabindex="-1">
                                <div v-if="contact.organization">
                                    {{ contact.organization.name }}
                                </div>
                            </Link>
                        </td>
                        <td class="border-t">
                            <Link class="flex items-center px-6 py-4" :href="route('contacts.edit', contact.id)" tabindex="-1">
                                {{ contact.city }}
                            </Link>
                        </td>
                        <td class="border-t">
                            <Link class="flex items-center px-6 py-4" :href="route('contacts.edit', contact.id)" tabindex="-1">
                                {{ contact.phone }}
                            </Link>
                        </td>
                        <td class="w-px border-t">
                            <Link class="flex items-center px-4" :href="route('contacts.edit', contact.id)" tabindex="-1">
                                <Icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
                            </Link>
                        </td>
                    </tr>
                    <tr v-if="contacts.data.length === 0" >
                        <td class="px-6 py-4 border-t" colspan="4">No contacts found.</td>
                    </tr>
                </table>
            </div>
            <Pagination class="mt-6" :links="contacts.links" />
        </div>
    </Layout>

</template>